<template>
	<view class="card_style_order__container">
		<view @tap="touchContainer(orderNo ,0)" class="card_style_order__head flex-x">
			<view class="head__orderno item12-10">订单编号：{{orderNo}}</view>
			<view class="head__orderstatus item12-2">{{orderStatus}}</view>
		</view>

		<slot></slot>

		<view class="card_style_order__bottom">
			<view class="order__bottom_message flex-x right">
				<view>优惠：￥{{orderDis}}，运费：￥{{orderFare}}，实付款：<span>￥{{orderPay}}</span></view>
			</view>
			<view class="order__bottom_option flex-x right">
				<view v-show="options" class="flex-x right">
					<view @tap.stop="touchContainer(orderNo ,1)" class="btn btn-cancel">取消订单</view>
					<view @tap.stop="touchContainer(orderNo ,2)" class="btn btn-pay">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderPay: {
				type: String,
				default: ''
			},
			orderDis: {
				type: String,
				default: ''
			},
			orderFare: {
				type: String,
				default: ''
			},
			orderNo: {
				type: String,
				default: ''
			},

			orderStatus: {
				type: String,
				default: ''
			},
			options: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			touchContainer: function(itemId, type) {
				this.$emit('event', itemId, type)
			}
		}
	}
</script>

<style>
	.card_style_order__container {
		width: 100%;
		background-color: #FFFFFF;
	}

	.card_style_order__head {
		border-bottom: 1rpx solid #E7E7E7;
	}

	.card_style_order__head .head__orderno {
		margin: 20rpx 30rpx;
		font-size: 26rpx;
		line-height: 38rpx;
		color: #999999;
	}

	.card_style_order__head .head__orderstatus {
		margin: 20rpx 30rpx;
		text-align: right;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #AE7A1F;
	}

	.card_style_order__bottom {
		border-top: 1rpx solid #E7E7E7;
	}

	.card_style_order__bottom .order__bottom_message {
		padding: 20rpx 0 0 0;
		margin: 0 50rpx;
	}

	.card_style_order__bottom .order__bottom_message view {
		color: #999999;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.card_style_order__bottom .order__bottom_message view span {
		color: #333333;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.order__bottom_option {
		padding: 10rpx 30rpx;
	}

	.order__bottom_option view .btn {
		margin: 0rpx 10rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;

	}

	.btn-pay {
		color: #FFFFFF;
		background-color: #E6B873;
	}

	.btn-cancel {
		color: #333333;
		background-color: #E7E7E7;
	}
</style>
